<template>
  <!-- 根据 visible 控制显示，动态绑定类型和样式 -->
  <div v-if="visible" class="notify" :class="`notify--${type}`" :style="{
    backgroundColor: customColor || '',
    top: position === 'top' ? '0' : 'auto',
    bottom: position === 'bottom' ? '0' : 'auto'
  }">
    <div class="notify__content">{{ message }}</div>
  </div>
</template>

<script>
export default {
  name: 'Notify',
  props: {
    visible: Boolean, // 是否显示（由父级/插件控制）
    type: { type: String, default: 'primary' }, // 通知类型：primary/success/danger/warning
    message: { type: String, default: '' }, // 提示内容
    customColor: String, // 自定义背景色
    duration: { type: Number, default: 3000 }, // 自动关闭时长（毫秒）
    position: { type: String, default: 'top' } // 显示位置：top/bottom
  },
  data() {
    return {
      timer: null // 定时器标识，用于自动关闭
    };
  },
  
  watch: {
    visible(val) {
      if (val) {
        this.startTimer(); // 显示时启动自动关闭定时器
      } else {
        this.clearTimer(); // 隐藏时清除定时器
      }
    }
  },
  methods: {
    startTimer() {
      this.clearTimer(); // 先清除旧定时器，防止重复
      this.timer = setTimeout(() => {
        this.$emit('update:visible', false); // 触发关闭
      }, this.duration);
    },
    clearTimer() {
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    }
  },
  beforeDestroy() {
    this.clearTimer(); // 组件销毁前清除定时器，避免内存泄漏
  }
};
</script>

<style scoped lang="scss">
/* 基础样式：固定定位、居中文字、过渡动画 */
.notify {
  position: fixed;
  left: 0;
  right: 0;
  padding: 12px;
  text-align: center;
  color: #fff;
  z-index: 9999;
  transition: opacity 0.3s, transform 0.3s;
  opacity: 0;
  /* 初始隐藏状态 */
}

/* 不同类型的默认背景色 */
.notify--primary {
  background-color: #1989fa;
}

.notify--success {
  background-color: #07c160;
}

.notify--danger {
  background-color: #ff4d4f;
}

.notify--warning {
  background-color: #faad14;
}

/* 显示动画：从顶部滑入 + 淡入 */
.notify.visible {
  opacity: 1;
  transform: translateY(0);
}

.notify {
  transform: translateY(-100%);
  /* 初始在顶部外 */
}
</style>